<template>
    <div>
<h3>添加图书</h3>
<p>书名：<input type="text" v-model="book_name"></p>
<p>封面：<input type="file" id="img"></p>
<p>作者：
    <select v-model="author">
        <option v-for="i in author_list" :key="i.id" :value="i.id" >{{i.author_name}}</option>
    </select>
</p>
<p><button @click="addbook">添加</button></p>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            base_url:'http://127.0.0.1:8000',
            author_list:[],
            book_name:'',
            author:'1',
        }
    },
    methods: {
        get_author() {
            axios({
                url:this.base_url + '/app01/show_author/',
            }).then(resp=>{
                console.log(resp.data)
                this.author_list=resp.data
            })
        },
        addbook() {
            let img = document.getElementById('img').files[0]
            let fdata=new FormData()
            fdata.append('book_name',this.book_name)
            fdata.append('author',this.author)
            fdata.append('img',img)
            axios({
                url:this.base_url + '/app01/add_book/',
                method:'post',
                data:fdata
            }).then(resp=>{
                console.log(resp.data)
            })
        },
    },
    created() {
        this.get_author()
    }
}
</script>

<style scoped>

</style>
